<template>
    <div>
        <quill-editor v-model="mValue" :options="editorOption" ref='editor'>
            <div :id="toolbarId" slot="toolbar">
                <span class="ql-formats">
                    <button type="button" class="ql-bold"></button>
                </span>
                <span class="ql-formats">
                    <button type="button" class="ql-italic"></button>
                </span>
                <span class="ql-formats">
                    <button type="button" class="ql-underline"></button>
                </span>
                <span class="ql-formats">
                    <button type="button" class="ql-strike"></button>
                </span>
                <span class="ql-formats">
                    <select class="ql-align">
                        <option selected="selected"></option>
                        <option value="center"></option>
                        <option value="right"></option>
                        <option value="justify"></option>
                    </select>
                </span>
                <span class="ql-formats">
                    <button type="button" class="ql-list" value="ordered"></button>
                </span>
                <span class="ql-formats">
                    <button type="button" class="ql-list" value="bullet"></button>
                </span>
                <span class="ql-formats">
                    <select class="ql-header">
                        <option value="1"></option>
                        <option value="2"></option>
                        <option value="3"></option>
                        <option value="4"></option>
                        <option value="5"></option>
                        <option value="6"></option>
                        <option selected="selected"></option>
                    </select>
                </span>
                <span class="ql-formats">
                    <select class="ql-color">
                        <option selected="selected"></option>
                        <option value="#e60000"></option>
                        <option value="#ff9900"></option>
                        <option value="#ffff00"></option>
                        <option value="#008a00"></option>
                        <option value="#0066cc"></option>
                        <option value="#9933ff"></option>
                        <option value="#ffffff"></option>
                        <option value="#facccc"></option>
                        <option value="#ffebcc"></option>
                        <option value="#ffffcc"></option>
                        <option value="#cce8cc"></option>
                        <option value="#cce0f5"></option>
                        <option value="#ebd6ff"></option>
                        <option value="#bbbbbb"></option>
                        <option value="#f06666"></option>
                        <option value="#ffc266"></option>
                        <option value="#ffff66"></option>
                        <option value="#66b966"></option>
                        <option value="#66a3e0"></option>
                        <option value="#c285ff"></option>
                        <option value="#888888"></option>
                        <option value="#a10000"></option>
                        <option value="#b26b00"></option>
                        <option value="#b2b200"></option>
                        <option value="#006100"></option>
                        <option value="#0047b2"></option>
                        <option value="#6b24b2"></option>
                        <option value="#444444"></option>
                        <option value="#5c0000"></option>
                        <option value="#663d00"></option>
                        <option value="#666600"></option>
                        <option value="#003700"></option>
                        <option value="#002966"></option>
                        <option value="#3d1466"></option>
                    </select>
                </span>
                <span class="ql-formats">
                    <select class="ql-background">
                        <option value="#000000"></option>
                        <option value="#e60000"></option>
                        <option value="#ff9900"></option>
                        <option value="#ffff00"></option>
                        <option value="#008a00"></option>
                        <option value="#0066cc"></option>
                        <option value="#9933ff"></option>
                        <option selected="selected"></option>
                        <option value="#facccc"></option>
                        <option value="#ffebcc"></option>
                        <option value="#ffffcc"></option>
                        <option value="#cce8cc"></option>
                        <option value="#cce0f5"></option>
                        <option value="#ebd6ff"></option>
                        <option value="#bbbbbb"></option>
                        <option value="#f06666"></option>
                        <option value="#ffc266"></option>
                        <option value="#ffff66"></option>
                        <option value="#66b966"></option>
                        <option value="#66a3e0"></option>
                        <option value="#c285ff"></option>
                        <option value="#888888"></option>
                        <option value="#a10000"></option>
                        <option value="#b26b00"></option>
                        <option value="#b2b200"></option>
                        <option value="#006100"></option>
                        <option value="#0047b2"></option>
                        <option value="#6b24b2"></option>
                        <option value="#444444"></option>
                        <option value="#5c0000"></option>
                        <option value="#663d00"></option>
                        <option value="#666600"></option>
                        <option value="#003700"></option>
                        <option value="#002966"></option>
                        <option value="#3d1466"></option>
                    </select>
                </span>
                <span class="ql-formats">
                    <select class="ql-font">
                        <option selected="selected"></option>
                        <option value="serif"></option>
                        <option value="monospace"></option>
                    </select>
                </span>
                <span class="ql-formats">
                    <button type="button" class="ql-clean"></button>
                </span>
                <span class="ql-formats">
                    <button type="button" class="ql-link"></button>
                </span>
                <!--图片按钮点击事件-->
                <span class="ql-formats">
                    <button type="button" @click="imgClick">
                        <svg viewBox="0 0 18 18">
                            <rect class="ql-stroke" height="10" width="12" x="3" y="4"></rect>
                            <circle class="ql-fill" cx="6" cy="7" r="1"></circle>
                            <polyline class="ql-even ql-fill" points="5 12 5 11 7 9 8 10 11 7 13 9 13 12 5 12"></polyline>
                        </svg>
                    </button>
                </span>
            </div>
        </quill-editor>
    </div>
</template>
<script>
function randomString(len) {
    len = len || 32;
    var $chars = "qwertyuiopasdfghjklzxcvbnm";
    var maxPos = $chars.length;
    var pwd = "";
    for (var i = 0; i < len; i++) {
        pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
    }
    return pwd;
}
function compressImage(file, defaultSize = 200 * 1024, imageType = "image/jpeg") {
    var scale = 1;
    if (defaultSize < file.size) {
        scale = (() => {
            return Math.pow(defaultSize / file.size, 0.0625);
        })(); //压缩比的计算
    }
    return new Promise(function(resolve, reject) {
        if (file.size < defaultSize) {
            resolve(new Blob([file]));
        }
        var dataUrl = URL.createObjectURL(file);
        var image = new Image();
        image.crossOrigin = "anonymous";
        image.src = dataUrl;
        image.onload = () => {
            var w = image.width;
            var h = image.height;
            var canvas = document.createElement("canvas");
            canvas.width = w;
            canvas.height = h;
            var ctx = canvas.getContext("2d");
            ctx.drawImage(image, 0, 0, w, h);
            resolve(dataURLtoBlob(canvas.toDataURL(imageType, scale)));
        };
    });
}
import "../lib/canvas-to-blob.min.js";
import upyun from "upyun";
import axios from "axios";
import { quillEditor } from "vue-quill-editor";
let input;
export default {
    created() {
        self = this;
        this.editorOption = {
            modules: {
                toolbar: "#" + this.toolbarId
            }
        };
    },
    props: ["signUrl", "value"],
    data() {
        return {
            toolbarId: randomString(32),
            mValue: this.value
        };
    },
    watch: {
        mValue(newVal) {
            this.$emit("input", newVal);
        },
        value(newVal) {
            this.mValue = newVal;
        }
    },
    methods: {
        onFileChange(e) {
            var f = e.target.files[0];
            if (!f) {
                return;
            }
            var ext = "." + f.name.split(".").pop();
            var fileName = "/hszx/user/" + new Date().getTime() + randomString(32) + ext;
            var bucket = new upyun.Bucket("chuangjike-img-real");

            function getHeaderSign(bucket, method, path) {
                var params = "bucket=" + bucket.bucketName + "&method=" + method + "&path=" + path;
                return axios
                    .get(self.signUrl + "?" + params)
                    .then(function(response) {
                        if (response.status !== 200) {
                            console.error("gen header sign faild!");
                            return;
                        }
                        return response.data;
                    })
                    .catch(function(error) {
                        console.log(error);
                    });
            }
            var client = new upyun.Client(bucket, getHeaderSign);
            compressImage(f, this.compressSize).then(f => {
                this.$emit("before-upload");
                client.putFile(fileName, f).then(result => {
                    this.$emit("after-upload");
                    var src =
                        ["ht", "tp", ":", "/", "/"].join("") +
                        "chuangjike-img-real.b0." +
                        ["u", "p", "a", "i", "y", "un"].join("") +
                        "." +
                        ["c", "om"].join("") +
                        fileName;
                    let editor = this.$refs.editor.quill;
                    editor.insertEmbed (editor.getSelection(true).index, 'image', src)
                    input = null;
                });
            });
        },
        imgClick() {
            input = document.createElement("input");
            input.type = "file";
            input.name = this.fileName;
            input.accept = "image/jpeg,image/png,image/jpg,image/gif";
            input.onchange = this.onFileChange;
            input.click();
        }
    },
    components: {
        quillEditor
    },
    destroyed() {
        self = null;
    }
};
</script>

